<template>
    <!-- 前台页面:我的活动信息对话框 -->
    <el-dialog
        title="活动信息"
        :visible.sync="dialogVisible"
        width="80%"
        >

        <div style="display: flex;justify-content: space-between;align-items: center;">
            <el-button type="primary" @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}}内容/总结拓展提示</el-button>
        
            <el-form>
                <el-form-item>
                    <el-input v-model="searchValue" placeholder="请输入活动名称(可以模糊匹配)" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div style="height: 400px;width: 100%; overflow: auto;">
            <el-table
                :data="activeList"
                style="width: 100%">

                <el-table-column
                prop="create_time"
                label="创建时间"
                sortable
                width="100"
                >
                </el-table-column>

                <el-table-column
                prop="active_name"
                label="活动名称"
                width="110"
                show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                prop="active_employee_name"
                label="活动负责人"
                width="110"
                show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                prop="start_time"
                label="开始时间"
                sortable
                width="100"
                >
                </el-table-column>

                <el-table-column
                prop="end_time"
                label="结束时间"
                sortable
                width="100"
                >
                </el-table-column>


                <el-table-column
                prop="active_address"
                label="活动地址"
                width="120"
                show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                prop="context"
                label="活动内容"
                width="280">
                <template slot-scope="scope">
                    <el-popover
                        v-show="!disabled"
                        placement="top-start"
                        title="活动内容"
                        width="500"
                        trigger="hover"
                        :content="scope.row.context">
                        <span slot="reference">
                            {{scope.row.context.length > 19 ? scope.row.context.slice(0,19)+'...':scope.row.context}}
                        </span>
                    </el-popover>
                    <span v-show="disabled" slot="reference">
                            {{scope.row.context.length > 19 ? scope.row.context.slice(0,19)+'...':scope.row.context}}
                    </span>
                </template>
                </el-table-column>

                <el-table-column
                prop="summary"
                label="活动总结"
                width="210">
                <template slot-scope="scope">
                    <el-popover
                        v-show="!disabled"
                        placement="top-start"
                        title="活动总结"
                        width="300"
                        trigger="hover"
                        :content="scope.row.summary">
                        <span slot="reference">
                            {{scope.row.summary.length > 14 ? scope.row.summary.slice(0,14)+'...':scope.row.summary}}
                        </span>
                    </el-popover>
                    <span v-show="disabled" slot="reference">
                            {{scope.row.summary.length > 14 ? scope.row.summary.slice(0,14)+'...':scope.row.summary}}
                    </span>  
                </template>
                </el-table-column>

                <el-table-column
                prop="status"
                label="活动状态"
                width="80">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.status === '已通过' ? 'success' : 'info'"
                    disable-transitions>{{scope.row.status}}</el-tag>
                </template>
                </el-table-column>

                <el-table-column
                prop="result"
                label="报名状态"
                width="80">
                <template slot-scope="scope">
                    <el-tag
                    :type="checkResult(scope.row.result)"
                    disable-transitions>{{scope.row.result}}</el-tag>
                </template>
                </el-table-column>

            </el-table>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    export default {
        name:'UserActiveDialogBox',
        data() {
            return {
                dialogVisible:false,
                // 展示的活动信息列表
                activeList:[],
                // 所有活动的信息列表
                allActiveList:[],
                // 控制显示扩展提示(内容/总结)
                disabled:true,
                // 模糊匹配
                searchValue:''
            }
        },
        watch:{
            // 监视活动名的输入情况
            searchValue(){
                if(this.searchValue !== ''){
                    this.activeList = this.allActiveList.filter((item)=>{
                        return item.active_name.indexOf(this.searchValue) !== -1
                    })
                }else{
                    this.activeList = this.allActiveList;
                }
            }
        },
        methods:{
            // 检查老人的报名状态
            checkResult(item){
                if(item === '报名成功'){
                    return 'success';
                }else if(item === '报名失败'){
                    return 'danger';
                }else{
                    return 'warning';
                }
            },
            // 事件回调
            userActiveInfoDialogBox(){
                const ID = JSON.parse(sessionStorage.getItem('user')).id;
                myAxios(
                    'http://localhost:8088/older/getallactivebyolderid?id='+ID,
                    'get',
                    null,
                    (data)=>{
                        if(data.length === 0){
                            // 没有参加活动
                        }else{
                            this.allActiveList = data;
                            this.activeList = data;
                            this.dialogVisible = true;      
                        }
                    }
                )
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('userActiveInfo',this.userActiveInfoDialogBox);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('userActiveInfo');
        }
    }
</script>

<style>

</style>